<template>
  <el-card class="order-container">
    <template #header>
      <div class="header">
        <h1>我预约的服务</h1>
      </div>
    </template>
    <el-table
        :loading="state.loading"
        :data="state.tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
    >
      <el-table-column
          prop="serviceName"
          label="服务名称"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="reservationTime"
          label="预约时间"
          align="center"
      ></el-table-column>
      <el-table-column
          label="审核状态"
          align="center"
      >
        <template #default="scope">
          <el-tag
              :type="getTagType(scope.row.reviewStatus)">
            {{ scope.row.reviewStatus }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="reviewOpinion"
          label="审核意见"
          align="center"
      ></el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template #default="scope">
          <div class="checkup">
            <el-button
                type="danger"
                size="small"
                style="margin-left: 8px"
                :disabled="scope.row.reviewStatus !== '待审核'"
                @click="handleDelete(scope.row)"
            >
              取消预约
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        :total="state.total"
        :page-size="state.pageSize"
        :current-page="state.currentPage"
        @current-change="changePage"
    />
  </el-card>

  <div class="footer">
    <div>社区养老服务整合平台</div>

  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { deleteServiceReservationById, listServiceReservations } from '../../service/serviceReservationApi'

const state = reactive({
  loading: false,
  tableData: [],
  total: 0,
  currentPage: 1,
  pageSize: 5,
})

const getTagType = (status) => {
  if (status === '已通过') {
    return 'success';
  } else if (status === '未通过') {
    return 'danger';
  }
  return 'info';
};

const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm('确定要取消预约吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });

    await deleteServiceReservationById(row.id);
    ElMessage.success('取消预约成功');
    await getServiceAppointment();
  } catch (error) {
    if (error === 'cancel') {
      return;
    }
    ElMessage.error('取消预约失败');
    console.error('取消预约失败:', error);
  }
};

const getServiceAppointment = async () => {
  state.loading = true;
  const params = {
    pageNum: state.currentPage,
    pageSize: state.pageSize,
  };

  const response = await listServiceReservations(params);
  if (response && response.data) {
    // 过滤掉 del_flag 为 1 的记录
    state.tableData = response.data.records.filter(record => record.del_flag !== 1) || [];
    state.total = response.data.total || 0;
  }
  state.loading = false;
};

const changePage = (newPage) => {
  state.currentPage = newPage;
  getServiceAppointment();
};

onMounted(() => {
  getServiceAppointment();
});
</script>


<style scoped>
.footer {
  position: fixed; /* 固定定位 */
  bottom: 0; /* 距离视口底部为 0 */
  left: 50%; /* 水平方向居中 */
  transform: translateX(-50%); /* 微调以确保完全居中 */
  font-size: 14px;
  display: flex;
  flex-direction: row; /* 水平排列 */
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%; /* 确保宽度占满整个视口 */
  box-sizing: border-box; /* 避免宽度计算问题 */
}

.beian-footer {
  bottom: 0;
  text-align: center;

a {
  color: #1D1D26;
  font-size: 14px;
  text-decoration-line: underline;

&:hover {
   color: #409EFF;
 }
}
}

</style>